<html dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Game Body</title>
<style type="text/css">
	body {
		font-family:Verdana,Arial,Helvetica,sans-serif;
	}
	.hide {
		display:none;
	}
	.hand {
		cursor:pointer;
	}
	.turn {
		background:#dadada;
	}
	.current-turn {
		background:#336699;
	}
	.hold {
		background:#ffffff;
	}
</style>
<!-- Compare Engine requirements -->
<script type="text/javascript" src="script/CompareEngine.js">
</script>
<!-- End of Compare Engine requirements -->
<!-- Prompt Window requirements -->
<link rel=stylesheet href="style/prompt.css"/>
<script type="text/javascript" src="script/PromptWindow.js">
</script>
<!-- End of Prompt Window requirements -->
<script type="text/javascript">

var p1Choice;
var p2Choice;
var p1 = 'p1';
var p2 = 'p2';
var turn = p1;
var rounds = 8;
var level = 7;
var choices = 4;
var currRound = 1;
var currIndex = 1;
// flag to indicate whether any element of the current round has been removed or not
var removed = false;
// flag indicates that player 1 has finished the game
var p1End = false;

// dummy variables
var consImages = '<img src="images/cw.png" /><img src="images/cw.png" /><img src="images/cw.png" /><img src="images/cw.png" />';
var c1 = true;
var p1Name = 'Anas';
var p2Name = '7amdy';

var p1Set = ['3', '2', '1', '1'];
var p2Set = ['7', '5', '2', '4'];

var p1TempSet = new Array(choices);
var p2TempSet = new Array(choices);

function load() {
	p1Choice = new Array(rounds);
	p2Choice = new Array(rounds);
	for( var i = 0 ; i < rounds ; i++ ) {
		p1Choice[i] = new Array(choices);
		p2Choice[i] = new Array(choices);
		for( var n = 0 ; n < choices ; n++ ) {
			p1Choice[i][n] = 0;
			p2Choice[i][n] = 0;
		}
	}
	printBoard();
	switchTurn();
}

function swapImage(e) {
	var tar;
	if(window.event) {
		tar = event.srcElement;
	} else if(e) {
		tar = e.target;
	}
	if( c1 ) {
		tar.src = "images/cw.png";
		tar.className = "";
		c1 = false;
	} else {
		c1 = true;
		tar.src = "images/cw.png";
		tar.className = "hand";
	}
	switchTurn();
}

function addInput(e) {
	var tar;
	var emptyIndex = -1;
	if(window.event) {
		tar = event.srcElement;
	} else if(e) {
		tar = e.target;
	}
	
	if( removed ) {
		if( turn == p1 ) {
			for( var i = 0 ; i < p1Choice[currRound-1].length ; i++ ) {
				if( p1Choice[currRound-1][i] == 0 ) {
					p1Choice[currRound-1][i] = Number(tar.id.substr(1, 1));
					emptyIndex = i+1;
					break;
				}
			}
		} else {
			for( var i = 0 ; i < p2Choice[currRound-1].length ; i++ ) {
				if( p2Choice[currRound-1][i] == 0 ) {
					p2Choice[currRound-1][i] = Number(tar.id.substr(1, 1));
					emptyIndex = i+1;
					break;
				}
			}
		}
	} else {
		if( turn == p1 ) {
			p1Choice[currRound-1][currIndex-1] = (p1Choice[currRound-1][currIndex-1] == 0) ? Number(tar.id.substr(1, 1)) : p1Choice[currRound-1][currIndex-1];
		} else {
			p2Choice[currRound-1][currIndex-1] = (p2Choice[currRound-1][currIndex-1] == 0) ? Number(tar.id.substr(1, 1)) : p2Choice[currRound-1][currIndex-1];
		}
	}
	document.getElementById(turn + '-input-' + currRound).innerHTML = generateImages(currRound, turn);
	// register removeInput event
	//alert(turn + '-' + currRound + ( (emptyIndex == -1) ? currIndex : emptyIndex));
	//document.getElementById(turn + '-' + currRound + ( (emptyIndex == -1) ? currIndex : emptyIndex)).onclick = removeInput;
	manageTurns();
}

function removeInput(e) {
	var tar;
	if(window.event) {
		tar = event.srcElement;
	} else if(e) {
		tar = e.target;
	}
	if( turn == p1 ) {
		p1Choice[currRound-1][Number(tar.id.substr(4, 1)-1)] = 0;
	} else {
		p2Choice[currRound-1][Number(tar.id.substr(4, 1)-1)] = 0;
	}
	// deregister input
	//alert(turn + '-' + currRound + Number(tar.id.substr(4, 1)));
	//document.getElementById(turn + '-' + currRound + Number(tar.id.substr(4, 1))).onclick = '';
	removed = true;
	document.getElementById(turn + '-input-' + currRound).innerHTML = generateImages(currRound, turn);
	manageTurns();
}

function manageTurns() {
	if( turn == p1 ) {
		for( var i = 1 ; i <= choices ; i++ ) {
			if( p1Choice[currRound-1][i-1] == 0 ) {
				document.getElementById('proceedInput').disabled = true;
				//alert('p1 = 0: ' + turn + '-' + currRound + Number(i));
				document.getElementById(turn + '-' + currRound + Number(i)).onclick = '';
			} else {
				//alert('p1 != 0: ' + turn + '-' + currRound + Number(i));
				document.getElementById(turn + '-' + currRound + Number(i)).onclick = removeInput;
			}
		}
	} else {
		for( var i = 1 ; i <= choices ; i++ ) {
			if( p2Choice[currRound-1][i-1] == 0 ) {
				document.getElementById('proceedInput').disabled = true;
				//alert('p2 = 0: ' + turn + '-' + currRound + Number(i));
				document.getElementById(turn + '-' + currRound + Number(i)).onclick = '';
			} else {
				//alert('p2 != 0: ' + turn + '-' + currRound + Number(i));
				document.getElementById(turn + '-' + currRound + Number(i)).onclick = removeInput;
			}
		}
	}
	if( !removed ) {
		if( currIndex == 4 ) {
			document.getElementById('proceedInput').disabled = false;
		} else {
			currIndex++;
		}
	} else {
		var pChoice = (turn == p1) ? p1Choice[currRound-1] : p2Choice[currRound-1];
		for( var i = 1 ; i <= pChoice.length ; i++ ) {
			if( pChoice[i-1] == 0 ) {
				return;
			}
		}
		document.getElementById('proceedInput').disabled = false;
	}
}

function proceedTurn(e) {
	var score = 0;
	document.getElementById('proceedInput').disabled = true;
	if( turn == p1 ) {
		document.getElementById(turn + '-result-' + currRound).innerHTML = adaptToImages(convertArrayToString(p1Choice[currRound-1]), convertArrayToString(p2Set));
		score = getResultInPlace(compareSets(convertArrayToString(p1Choice[currRound-1]), convertArrayToString(p2Set)));
	} else {
		document.getElementById(turn + '-result-' + currRound).innerHTML = adaptToImages(convertArrayToString(p2Choice[currRound-1]), convertArrayToString(p1Set));
		score = getResultInPlace(compareSets(convertArrayToString(p2Choice[currRound-1]), convertArrayToString(p1Set)));
	}
	//document.getElementById(turn + '-result-' + currRound).innerHTML = adaptToImages(convertArrayToString(p1TempSet), convertArrayToString(p2TempSet));
	// game is running
	if( currRound != rounds || turn != p2 ) {	
		if( turn == p1 ) {
			p1End = (score == choices);
			// display result
			turn = p2;
			if( p1End ) {
				showPrompt('images/collection/Chat-48.png',  p2Name + ' this is your last chance', 'Proceed');
			} else {
				showPrompt('images/collection/Forward-48.png', 'Now it\'s ' + p2Name + '\'s turn!', 'Proceed');
			}
			switchTurn();
		} else {
			// game end cycle
			if( score == choices ) {
				if( p1End ) {
					// match drawn
					showPrompt('images/collection/drawn.png', 'Match Drawn', 'Ok');
					disableFunctionButtons();
				} else {
					// p2 wins
					showPrompt('images/collection/object-1.png', p2Name + ' Wins', 'Ok');
					disableFunctionButtons();
				}
			} else {
				if( p1End ) {
					// p1 wins
					showPrompt('images/collection/object-1.png', p1Name + ' Wins', 'Ok');
					disableFunctionButtons();
				} else {
					// resume game
					//showPrompt('images/collection/drawn.png', 'Match Drawn', 'Ok');
					showPrompt('images/collection/Forward-48.png', 'Now it\'s ' + p1Name  + '\'s turn!', 'Proceed');
					switchTurn();
				}				
			}
			currRound++;
			turn = p1;
		}
		// reset flag
		removed = false;
		
		// deregister previous input events
		disablePreviousButtons();
		
		currIndex = 1;		
	} else {
		// end of game
		showPrompt('images/collection/object-1.png', 'Match Drawn', 'Ok');
		disableFunctionButtons();

	}
}

function generateImages(cRound, turn) {
	var images = '';
	for( var i = 1 ; i <= choices ; i++ ) {
		images += generateImage(cRound, i, turn);
	}
	return images;
}

function generateImage(cRound, cIndex, turn) {
	var ar;
	if( turn == p1 ) {
		ar = p1Choice;
	} else {
		ar = p2Choice;
	}
	if( ar[cRound-1][cIndex-1] == 0 ) {
		return '<img src="images/cw.png" id="' + turn + '-' + cRound + cIndex + '"/>';
	} else {
		return '<img src="images/c' + ar[cRound-1][cIndex-1] + '.png" id="' + turn + '-' + cRound + cIndex + '" class="hand"/>';
	}
}


function switchTurn() {
	disablePreviousButtons();
	if( turn == p1 ) {
		// switch style
		for(var i = 1 ; i <= rounds ; i++) {
			document.getElementById('p1-input-' + i).className = (i==currRound) ? "current-turn":"turn";
			document.getElementById('p2-input-' + i).className = "";
		}
	} else {
		// switch style
		for(var i = 1 ; i <= rounds ; i++) {
			document.getElementById('p2-input-' + i).className = (i==currRound) ? "current-turn":"turn";
			document.getElementById('p1-input-' + i).className = "";
		}	
	}
}

function disableFunctionButtons() {
	for( var i = 1 ; i <= level ; i++ ) {
		document.getElementById('c' + i).className = '';
		document.getElementById('c' + i).disabled = true;
		document.getElementById('c' + i).onclick = '';
	}
}

function disablePreviousButtons() {
	if( (currRound == 1 && turn == p2) || currRound > 1 ) {
		if( turn == p1 ) {
			for( var i = 1 ; i <= choices ; i++ ) {
				var element = document.getElementById(p2 + '-' + Number(currRound-1) + i);
				// remove link
				element.className = '';
				// deregister event
				element.onclick = '';
			}
		} else {
			for( var i = 1 ; i <= choices ; i++ ) {
				var element = document.getElementById(p1 + '-' + currRound + i);
				// remove link
				element.className = '';
				// deregister event
				element.onclick = '';
			}
		}
	}
}

function printBoard() {
	var output = '<tr><th colspan=2>' + p1Name + '</th><th colspan=2>' + p2Name + '</th></tr>';
	output += '<tr><th>Result</th><th>Choices</th><th>Choices</th><th>Result</th></tr>';
	for( var i = 1 ; i <= rounds ; i++ ) {
		output += '<tr><td id="p1-result-' + i + '">' + consImages  + '</td>';
		output += '<td id="p1-input-' + i + '">';
		var tempOutput = '';
		for( var n = 1 ; n <= choices ; n++ ) {
			output += generateImage(i, n, p1);
			tempOutput += generateImage(i, n, p2);
		}
		output += '</td>';
		output += '<td id="p2-input-' + i + '">' + tempOutput + '</td>';
		tempOutput = '';
		output += '<td id="p2-result-' + i + '">' + consImages + '</td></tr>';
	}
	output += '<tr><th>' + p1Name + '</th><th colspan=2>';
	for ( var i = 1 ; i <= level ; i++ ) {
		output += '<img class="hand" id="c' + i + '" src="images/c' + i + '.png" />';
	}
	output += '</th>';
	output += '<th>' + p2Name + '</th></tr>';
	output += '<tr><th colspan=4>';
	output += '<input type="button" id="proceedInput" value="Proceed" />';
	output += '</th></tr>';
	document.getElementById('board').innerHTML = output;
	document.getElementById('proceedInput').onclick = proceedTurn;
	document.getElementById('proceedInput').disabled = true;
	output = '';
	
	// register events and choose method
	for( var i = 1 ; i <= level ; i++ ) {
		document.getElementById('c' + i).onclick = addInput;
	}
}

function convertArrayToString(array) {
	var str = '';
	for( var i = 0 ; i < array.length ; i++ ) {
		str += array[i];
	}
	return str;
}

</script>
</head>
<body onload="load()">
<center>
<table id="board" cellspacing=0>
</table>
</center>
<!-- The following code required for the prompt window (floating div) -->
<div id="promptWindow" class="prompt">
	<div id="promptBackground" class="prompt-bg">
	</div>
	<div id="propmtContent" class="prompt-content">
		<table class="prompt-text" width="450">
			<tr height="110">
				<th id="prompt-img" width="25%"></th>
				<td id="prompt-text"></td>
			</tr>
			<tr height="40">
				<th id="prompt-close" colspan="2">
				</th>
			</tr>
		</table>
	</div>
</div>
</body>
</html>